<template>
  <div id="personalInfo">
    <div class="container">
      <div>
        <div class="head-line">
          <img src="@/assets/images/titleIcon.png" alt="" />
          {{ $t("personalInformation.avatar") }}
        </div>
        <div class="head-sculpture">
          <img
            v-if="imgPicture == ''"
            src="@/assets/images/headSculpture.png"
          />
          <img v-else class="upload-img" :src="imgPicture" alt="" />
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="myHeaders"
            name="avatarfile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <div class="createBtn">
              <img src="@/assets/images/choice.png" alt="" />{{
                $t("personalInformation.upload")
              }}
            </div>
          </el-upload>
          <div style="color: #d1d4d6; font-size: 12px">
            {{ $t("personalInformation.supportFormat") }}
          </div>
        </div>
      </div>
      <div style="position: relative; top: 30px">
        <div class="head-line">
          <img src="@/assets/images/titleIcon.png" alt="" />
          {{ $t("personalInformation.basicInfo") }}
        </div>

        <div class="personForm">
          <div>
            <div class="personTitle">
              {{ $t("personalInformation.username") }}
            </div>
            <el-input
              v-model="queryParams.userName"
              :placeholder="$t('personalInformation.enterUsername')"
              disabled
            />
          </div>
          <div>
            <div class="personTitle">{{ $t("personalInformation.name") }}</div>
            <el-input
              v-model="queryParams.name"
              :placeholder="$t('personalInformation.enterName')"
              disabled
            />
          </div>
          <div>
            <div class="personTitle">{{ $t("personalInformation.phone") }}</div>
            <el-input
              v-model="queryParams.phone"
              :placeholder="$t('personalInformation.enterPhone')"
              disabled
            />
          </div>
          <div>
            <div class="personTitle">
              {{ $t("personalInformation.department") }}
            </div>
            <el-input
              v-model="queryParams.department"
              :placeholder="$t('personalInformation.enterDepartment')"
              disabled
            />
          </div>
          <div>
            <div class="personTitle">
              {{ $t("personalInformation.position") }}
            </div>
            <el-input
              v-model="queryParams.position"
              :placeholder="$t('personalInformation.enterPosition')"
              disabled
            />
          </div>
        </div>
      </div>
      <div class="down-container">
        <el-button @click="cancelHandle">{{
          $t("personalInformation.cancel")
        }}</el-button>
        <el-button
          style="background: #2bc17b; color: #ffffff"
          @click="addAlarmConfirm()"
        >
          {{ $t("personalInformation.confirm") }}
        </el-button>
      </div>
    </div>
  </div>
</template>
<script setup name="personalInformation">
import { onMounted, reactive, toRefs } from "vue";
import { getInfo, updateUser } from "@/api/account/index.js";
import { ElMessage } from "element-plus";
import { getToken } from "@/utils/auth";
const { proxy } = getCurrentInstance();
import { getCurrentInstance } from "vue";
const { $t } = getCurrentInstance().proxy;
const data = reactive({
  queryParams: {
    userName: "",
    name: "",
    phone: "",
    department: "",
    position: "",
  },
  uploadUrl: import.meta.env.VITE_APP_BASE_API + "/system/user/profile/avatar",
  myHeaders: { Authorization: "Bearer " + getToken() },
  imgPicture: "",
  userInfo: {},
});

const { queryParams, uploadUrl, myHeaders, imgPicture, userInfo } =
  toRefs(data);

function handleAvatarSuccess(response) {
  // console.log(response)
  imgPicture.value = response.imgUrl;
  userInfo.value.avatar = imgPicture.value;
}

function beforeAvatarUpload(rawFile) {
  console.log("rawFile.size", rawFile.size)
  debugger
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("文件大小不能超过 2MB!");
    return false;
  }else {
    if (rawFile.type === "image/jpeg" || rawFile.type === "image/jpg" || rawFile.type === "image/png") {
      return true;
    }else {
      ElMessage.error("图片格式必须为jpg/jpeg/png!");
    }
  }
  return true;
}

// 取消
function cancelHandle() {
  proxy.$router.go(-1);
}

// 确定
function addAlarmConfirm() {
  updateUser(userInfo.value).then((res) => {
    if (res.code === 200) {
      ElMessage.success($t("personalInformation.operateSuccess"));
    } else {
      ElMessage.success($t("personalInformation.operateFail"));
    }
  });
}

function getPersonalInfo() {
  getInfo().then((res) => {
    if (res.code === 200) {
      userInfo.value = res.user;
      let roles = null;
      res.user.roles.map((item) => {
        if (res.user.roles.length == 1) {
          roles = item.roleName;
        }else {
          roles += item.roleName + " ";
        }
      });
      imgPicture.value = res.user.avatar;
      queryParams.value = {
        userName: res.user.userName,
        name: res.user.nickName,
        phone: res.user.phonenumber,
        department: res.user.dept.deptName,
        position: roles,
      };
    }
  });
}

onMounted(() => {
  getPersonalInfo();
});
</script>
<style lang="scss" scoped>
#personalInfo {
  width: 100%;
  height: 100%;
}
.container {
  position: relative;
  width: calc(100% - 40px);
  height: 92%;
  margin: 0 20px 20px;
  border-radius: 10px;
  background: white;
  padding: 36px 30px 25px;
  .head-line {
    display: flex;
    align-items: center;
    img {
      margin-right: 12px;
    }
  }
  .head-sculpture {
    width: 36%;
    display: flex;
    justify-content: space-around;
    margin: 2% 0 0 0;
    align-items: center;
    .upload-img {
      width: 100px;
      height: 100px;
      border-radius: 80px;
    }
  }

  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .createBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 26px;
    width: 98px;
    height: 36px;
    font-size: 12px;
    box-sizing: border-box;
    border-radius: 4px;
    color: rgba(43, 193, 123, 1);
    background: rgba(51, 151, 255, 0.03);
    border: 1px solid rgba(43, 193, 123, 1);
    cursor: pointer;

    &:hover {
      background: rgba(51, 151, 255, 0.1);
    }
  }
  .personForm {
    width: 20%;
    position: relative;
    top: 15px;
    left: 27px;
    .personTitle {
      font-size: 14px;
      color: #333333;
      font-weight: 500;
      margin-bottom: 10px;
      margin-top: 15px;
    }
  }
  .down-container {
    margin: 13% 20px;
    background-color: #ffffff;
    border-radius: 4px;
    display: flex;
    bottom: 30px;
    justify-content: center;
    :deep .el-button {
      width: 81px;
      height: 32px;
    }
  }
}

:deep .el-input {
  --el-input-height: var(--el-component-size);
  position: relative;
  font-size: var(--el-font-size-base);
  display: inline-flex;
  line-height: var(--el-input-height);
  box-sizing: border-box;
  vertical-align: middle;
  width: 320px;
  height: 35px;
}
</style>
